<template>
    <!--最外层div-->
    <div class="conter">
        <!--头部-->
        <Head/>
        <div class="header">
            <div class="toubu">
                <el-row :gutter="15">
                    <el-col :span="4" :sm="4" :xs="5">
                        <div class="headerL">
                            <i class="el-icon-collection-tag"></i>
                        </div>
                    </el-col>
                    <el-col :span="6" :sm="12" :xs="16">
                        <div class="headerR">
                            <p>收藏的文章</p>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="neirong">
                <div class="zhongjian" style="margin-top:50px;">
                    <!--列表1-->
                    <div class="diyi" style="margin-top:10px;">
                        <div class="youce">
                            <el-row :gutter="5">
                                <el-col :span="19">
                                    <div class>
                                        <el-row>
                                            <el-col :span="9" :xs="24">
                                                <div class="diyihang">
                                                    <p>聊聊VUE组件化编程</p>
                                                </div>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="24" :xs="18">
                                                <div class="wenzi">
                                                    <p>这篇文章是同事Awe，vue插件小王子写的，现在转过来，原文只有md，不知道网上链接。前</p>
                                                    <p style="margin-top:-7px;">端开发的现状随着互联网设备和硬件的发展cha...</p>
                                                </div>
                                            </el-col>
                                        </el-row>
                                        <div class="diyi">
                                            <el-row>
                                                <el-col :span="2" :xs="6">
                                                    <div class="aaa">
                                                        <a href>乖小鬼</a>
                                                    </div>
                                                </el-col>
                                                <el-col :span="2" :xs="6">
                                                    <div class="tubiao">
                                                        <i class="el-icon-view"> 44</i>
                                                    </div>
                                                </el-col>
                                                <el-col :span="2" :xs="6">
                                                    <div class="tubiao">
                                                        <i class="el-icon-chat-square"> 22</i>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="5">
                                    <div class="tupian">
                                        <img src="../../assets/xyn1.png" alt>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <!--分割线-->
                        <el-divider style="margin-top:50px;"></el-divider>
                    </div>
                    <!--列表2-->
                    <div class="dier" style="margin-top:10px;">
                        <div class="youce">
                            <el-row :gutter="5">
                                <el-col :span="19">
                                    <div class>
                                        <el-row>
                                            <el-col :span="9" :xs="24">
                                                <div class="diyihang">
                                                    <p>日期选择组件</p>
                                                </div>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="24" :xs="18">
                                                <div class="wenzi">
                                                    <p>前言：授人以鱼不如授人以渔，与其寻寻觅觅找一个适合自己的ul的选择器控件，不如自己动手</p>
                                                    <p style="margin-top:-7px;">尝试一下，如果你还不会Vue.js 那么请移步Vue...</p>
                                                </div>
                                            </el-col>
                                        </el-row>
                                        <div class="dier">
                                            <el-row>
                                                <el-col :span="1" :xs="3">
                                                    <div class="tubiaote">
                                                        <i class="layui-icon layui-icon-diamond">0.1</i>
                                                    </div>
                                                </el-col>
                                                <el-col :span="4" :xs="11">
                                                    <div style="margin-left: 25px" class="aaaa guaixiaogui">
                                                        <a href>乖小鬼</a>
                                                    </div>
                                                </el-col>
                                                <el-col :span="2" :xs="4">
                                                    <div class="tubiao" style="margin-left:-40px;">
                                                        <i class="el-icon-view">37</i>
                                                    </div>
                                                </el-col>
                                                <el-col :span="2" :xs="6">
                                                    <div class="tubiao" style="margin-left:-40px;">
                                                        <i class="el-icon-chat-square">18</i>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="5">
                                    <div class="tupian">
                                        <img src="../../assets/xyn2.png" alt>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <!--分割线-->
                        <el-divider></el-divider>
                    </div>
                    <!--列表3-->
                    <div class="disan" style="margin-top:10px;">
                        <div class="youce">
                            <el-row :gutter="5">
                                <el-col :span="19">
                                    <div class>
                                        <el-row>
                                            <el-col :span="9" :xs="24">
                                                <div class="diyihang">
                                                    <p>thinkphp5.0简单的删除数据学习笔记</p>
                                                </div>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="24" :xs="18">
                                                <div class="wenzi">
                                                    <p>在user.php中增加如下代码用于打开编写的函数为del()；编写delete()函数是用于删除指定</p>
                                                    <p style="margin-top:-7px;">主键值得数据记录；往往我们要注意一些...</p>
                                                </div>
                                            </el-col>
                                        </el-row>
                                        <div class="dier">
                                            <el-row>
                                                <el-col :span="2" :xs="6">
                                                    <div class="aaa">
                                                        <a href>乖小鬼</a>
                                                    </div>
                                                </el-col>
                                                <el-col :span="2" :xs="6">
                                                    <div class="tubiao">
                                                        <i class="el-icon-view"> 44</i>
                                                    </div>
                                                </el-col>
                                                <el-col :span="2" :xs="6">
                                                    <div class="tubiao">
                                                        <i class="el-icon-chat-square"> 22</i>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="5">
                                    <div class="tupian tupian2">
                                        <img src="../../assets/xyn3.png" alt>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <!--分割线-->
                        <el-divider></el-divider>
                    </div>
                </div>
            </div>
        </div>
        <div class="Goback hiddem-xs-only">
            <li class="hidden-sm-and-up yd-fanhui" :class="{'actives':index === isActives}" @click="changeTabs(index)">
                <router-link to="/yd-wode"><p><i class="el-icon-back"></i></p></router-link>
            </li>
        </div>
    </div>
</template>

<script>
    import Head from '../Head'
    // import Footers from '../Footers'
    export default ({
        name: "conter",
        methods: {
            changeTabs(index) {
                this.isActives = index;
            }
        },
        components: {
            Head,
            // Footers
        }
    });
</script>


<style scope>
    .conter {
        margin-top: 80px;
        margin-left: 25%;
        margin-right: 25%;
        height: auto;
        /* border:1px solid red; */
    }

    .toubu {
        padding: 10px 0 30px 0;
        border-radius: 5px;
        background-color: #ea6f5a;
    }

    .header {
        width: 100%;
    }

    .headerL i {
        font-size: 44px;
        color: white;
        padding-top: 26px;
        padding-left: 50px;
    }

    .headerR p {
        padding-top: 23px;
        padding-left: 5px;
        color: white;
        font-size: 33px;
        margin: 0 auto;
    }

    .diyihang {
        text-align: left;
        margin: 10px 0 20px 0
    }

    .diyihang p {
        font-weight: 600;
        text-decoration: none;
        font-size: 23px;
    }

    .wenzi {
        /* margin-top: -23px; */
    }

    .wenzi p {
        text-align: left;
        color: #999;
        font-size: 14px;
        margin: 10px 0 20px 0;
    }

    .aaaa a {
        display: block;
        margin-top: -2px;
        font-size: 13px;
        color: #969696;
        text-decoration: none;
        /*margin-left: -16px;*/
    }

    .aaa a {
        display: block;
        margin-top: -2px;
        font-size: 13px;
        color: #969696;
        text-decoration: none;
    }

    .tubiao i {
        color: #b4b4b4;
        margin-left: 4px;
    }

    .tubiaote {
        margin-top: -3px;
    }

    .tubiaote i {
        color: red;
    }

    .tupian img {
        margin-top: 21px;
        margin-right: 3px;
        width: 120px;
        height: 120px;
        float: right;
    }

    .actives {
        background-color: #f0f0f0;
        color: #ff4f4c;
    }

    .Goback li {
        text-align: center;
        line-height: 50px;
        position: fixed;
        bottom: 30px;
        left: 30px;
        background-color: #b3b3b3;
        width: 50px;
        height: 50px;
        border-radius: 8px;
        font-size: 35px;
        opacity: 0.5;
    }

    .Goback li i {
        color: #fff;
    }

    @media screen and (max-width: 750px) {
        .conter {
            margin: 80px 5% 60px 5%;
        }

        .headerL i {
            padding-left: 20px;
        }

        .diyihang {
            margin-bottom: 5px;
        }

        .tupian {
            margin-top: 35px;
        }

        .tupian2 {
            margin-top: 65px;
        }

        .guaixiaogui {
            margin-left: 0;
        }
    }
</style>
